 <%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>
<div class="row-fluid">
		<div class="span12">
			<div class="box gradient">
				<div class="title">
					<h4><span>Category Group</span>
					</h4>
					<a href="#" class="minimize">Minimize</a>
				</div>
				<div class="content scrollable clearfix">
					<table class="ajaxTable display table table-bordered">
						<thead>
							<tr>
								<th>Name </th>
								<th>Description</th>
								<th>Action</th>
 							</tr>
						</thead>
					</table>
				</div>
			</div>
			
			</div>

	<a href="#newMenuGroup"  data-toggle="modal" class="btn btn-info"> <span
				class="icon12 icomoon-icon-plus white"></span> New</a>
			
		</div>
 


<script type="text/javascript">

var render = false;
var oTime = "";
var oTable;
$(document).ready(function () {
	 
	oTable = $('.ajaxTable').dataTable({
		"bLengthChange": true,
		"sAjaxSource": '${ctx}/admin/category-group/',
		"onDataLoad": function () { 
			$('.icomoon-icon-pencil').click(function(){
				var id  = $(this).parent('a[dataId]').attr('dataid');

				$.ajax({
					url : "${ctx}/admin/category-group/"+id+"/get/",
					type : "GET",
					dataType : "json",
					success : function(data){		
						if(data && data.state && (data.state.indexOf("ERROR") != -1)){
							johnny.error(data.message);
							return;
						}else{
							$("#cateGroupEdit").modal('show');
								$("#modifyId").val(data.id);
								$("#modifyName").val(data.name);
								$("#modifyDesc").val(data.description);
							}
					}
				});
				
				
				
				
 			});
		}
	});
	var name = $("<input>").attr({
		type: "text",
		field: "name",
		op: "cn",
		placeholder: "Name",
		class: "filterdata"
	});
	johnny.initTableQuery(name);
	$("#confirmEdit").click(function(){
		$.ajax({
			url : "${ctx}/admin/category-group/"+$("#modifyId").val()+"/edit/",
			type : "POST",
			data : $('#cateGroupEditForm').serialize(),
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
					$("#cateGroupEdit").modal('hide');
					updateGrid();
					johnny.info("create update Category Group successfully");
					}
			}
		});
	});
 	$('#confirmMenuGroup').click(function(){
		$.ajax({
			url : "${ctx}/admin/category-group/create/",
			type : "POST",
			data : $('#menuGroupForm').serialize(),
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
					$("#newMenuGroup").modal('hide');
					updateGrid();
					johnny.info("create new Group successfully");
					}
			}
		});


	});



	
});
function updateGrid() {
	window.clearTimeout(oTime);
	oTime = setTimeout(function () { oTable.fnDraw(); }, 500);
}

var columnHeader = ['name', 'description'];
var QueryData = function (aoData) {
	return johnny.initQueryData(aoData, columnHeader);
}

var DataTableForm = function (json, echo) {
	var dataArray = new Array();
	for (var i = 0; i < json.result.length; i++) {
		var subArray = new Array();
		var link = "${ctx}/admin/category-group/"+json.result[i].id+"/edit/";
		subArray.push(json.result[i].name);
		subArray.push(json.result[i].description);
		var conf = [{
				link : '#',
				dataId : json.result[i].id,
				text : 'edit',
				css  : 'icomoon-icon-pencil'
			},
			{
				link : link,
				text : 'Manage Category',
				css   : 'icomoon-icon-pen'
			}
			
			];
		subArray.push(johnny.getGridLink(conf));
 		dataArray.push(subArray);
	}
	return {
		sEcho: echo,
		iTotalRecords: json.totalCount,
		iTotalDisplayRecords: json.totalCount,
		aaData: dataArray
	};
}
 
</script>
<div id="newMenuGroup" class="modal hide fade" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>New Category </h3>
	</div>
	<div class="modal-body">
 				<form method="post" id="menuGroupForm">
 					
						<div class="form-row row-fluid">
							<label class="form-label span4">Name</label>
							<input class="span8" name="name" />
						</div>
						<div class="form-row row-fluid">
							<label class="form-label span4">Description</label>
							<input class="span8" name="description"  />
						</div>
				</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" id ="confirmMenuGroup" class="btn btn-primary">Save changes</a>
	</div>
</div>

<div id="cateGroupEdit" class="modal hide fade" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>New Category </h3>
	</div>
	<div class="modal-body">
 				<form method="post" id="cateGroupEditForm">
 					<input class="span8" id="modifyId" type="hidden" />
						<div class="form-row row-fluid">
							<label class="form-label span4">Name</label>
							<input class="span8" name="name" id="modifyName" />
						</div>
						<div class="form-row row-fluid">
							<label class="form-label span4">Description</label>
							<input class="span8" name="description"  id="modifyDesc"  />
						</div>
				</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" id ="confirmEdit" class="btn btn-primary">Save changes</a>
	</div>
</div>
<body>

